<template>
  <div class="app-container">
    <a-card size="small" :border="false" class="box-card">
      <template #title>
        <header class="titleHeader">
          <div class="titleLeft">基础信息</div>
        </header>
      </template>
      <div class="content">
        <div v-if="app">
          <a-row
            justify="center"
            algin="middle"
            style="margin-bottom: 14px; padding: 8px"
          >
            <a-col flex="70px">
              <a target="_blank" :href="app.icon">
                <img
                  :src="app.icon"
                  style="
                    display: block;
                    width: 100%;
                    height: 70px;
                    vertical-align: middle;
                    border-radius: 12px;
                  "
                />
              </a>
            </a-col>
            <a-col flex="auto" class="basic_info_box">
              <div class="lt">
                <span style="font-weight: bold; color: #3c3c3c"
                  >游戏名称: {{ app.name }}</span
                >
                <span>aappID: {{ app.aappID }}</span>
                <span
                  >游戏状态:
                  <a-tag type="primary" color="warning" :bordered="false">{{
                    app.status
                  }}</a-tag></span
                >
              </div>
              <div class="rt">
                <span>当前版本: {{ app.benbn }}</span>
                <span
                  >包&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:
                  {{ app.title }}</span
                >
                <span>创建时间: {{ app.createTime }}</span>
              </div>
            </a-col>
          </a-row>
        </div>
        <div class="steps">
          <a-row justify="center" algin="middle">
            <a-col flex="auto" class="steps_title">
              <ExclamationCircleOutlined
                class="icon"
              />资料上传成功，查看审核进度:
            </a-col>
            <a-col flex="35px">
              <span @click="doAction('deleteSteps')">
                <CloseOutlined class="icon_2" />
              </span>
            </a-col>
          </a-row>
          <a-steps
            v-model:current="current"
            :items="items"
            size="small"
            class="a_steps"
          ></a-steps>
        </div>
        <div class="content_form1 marginTop12">
          <a-row justify="center" algin="middle">
            <a-col flex="auto" class="steps_title1">
              <a-form
                layout="horizontal"
                :model="formState"
                ref="formRef"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
                labelAlign="left"
                :colon="false"
              >
                <!-- <a-col :span="4"> -->
                <a-form-item label="游戏分类" name="name">
                  <!-- <a-input
                        v-model:value="formState.name"
                        allow-clear
                        show-count
                        :maxlength="20"
                        placeholder="请输入20字以内的游戏名称"
                        style="width: 120px;"
                      /> -->
                  <span class="ant-form-text">{{ app.sort }}</span>
                </a-form-item>
                <!-- </a-col> -->
                <!-- <a-col :span="4"> -->
                <a-form-item label="游戏语言" name="name">
                  <!-- <a-input
                        v-model:value="formState.name"
                        allow-clear
                        show-count
                        :maxlength="20"
                        placeholder="请输入20字以内的游戏名称"
                        style="width: 120px;"
                      /> -->
                  <span class="ant-form-text">{{ app.Language }}</span>
                </a-form-item>
                <!-- </a-col> -->
                <!-- <a-col :span="4"> -->
                <a-form-item label="年龄分级" name="name">
                  <!-- <a-input
                    v-model:value="formState.name"
                    allow-clear
                    show-count
                    :maxlength="20"
                    placeholder="请输入20字以内的游戏名称"
                    style="width: 120px"
                  /> -->
                  <span class="ant-form-text">{{ app.age }}</span>
                </a-form-item>
                <!-- </a-col> -->
                <!-- <a-col :span="4"> -->
                <a-form-item label="一句话介绍" name="name">
                  <!-- <a-input
                        v-model:value="formState.name"
                        allow-clear
                        show-count
                        :maxlength="20"
                        placeholder="请输入20字以内的游戏名称"
                        style="width: 120px;"
                      /> -->
                  <span class="ant-form-text">{{ app.introduce }}</span>
                </a-form-item>
                <!-- </a-col> -->
                <!-- <a-col :span="4"> -->
                <a-form-item label="游戏简介" name="name">
                  <!-- <a-input
                        v-model:value="formState.name"
                        allow-clear
                        show-count
                        :maxlength="20"
                        placeholder="请输入20字以内的游戏名称"
                        style="width: 120px;"
                      /> -->
                  <span class="ant-form-text">{{ app.intor }}</span>
                </a-form-item>
                <a-form-item label="宣传图">
                  <div class="banner">
                    <a-image-preview-group v-if="app.urls">
                      <a-image
                        :width="68"
                        v-for="url in app.urls"
                        :key="url"
                        :src="url"
                      />
                    </a-image-preview-group>
                  </div>
                </a-form-item>
                <div class="a_col_date">
                  <div
                    style="
                      color: #303133;
                      font-weight: bold;
                      margin-bottom: 12px;
                    "
                  >
                    视频资源<span style="color: #969696; margin-left: 8px"
                      >视频资源修改后需要重新提交审核</span
                    >
                  </div>
                </div>
                <a-form-item label="视频标题" name="name">
                  <span class="ant-form-text">{{ app.videoTitle }}</span>
                </a-form-item>
                <a-form-item label="视频封面">
                  <div class="banner">
                    <a-image :width="68" :src="app.videoUrl" />
                  </div>
                </a-form-item>
                <a-form-item label="视频文件">
                  <div class="banner">
                    <a-image :width="68" :src="app.videoFile" />
                  </div>
                </a-form-item>
              </a-form>
            </a-col>
            <a-col flex="35px">
              <a-button
                size="middle"
                class="search_Button confirm"
                type="primary"
                @click="doAction('edit', app)"
                >编辑资料</a-button
              >
            </a-col>
          </a-row>
          <div class="examine-button">
            <a-button
              size="middle"
              class="search_Button confirm"
              type="primary"
              @click="doAction('pass', app)"
              >审核通过</a-button
            >
            <a-button
              size="middle"
              class="search_Button confirm_No"
              type="primary"
              @click="doAction('noPass', app)"
              >审核不通过</a-button
            >
          </div>
        </div>
      </div>
    </a-card>
    <a-card size="small" :bordered="false" class="box-card marginTop12">
      <a-row justify="center" algin="middle" style="margin-bottom: 14px">
        <a-col flex="auto">
          <div class="a_col_date">
            <div style="color: #303133; margin-left: 6px; font-weight: bold">
              历史版本记录
            </div>
          </div>
        </a-col>
        <a-col flex="70px">
          <a-button
            size="middle"
            class="search_Button confirm"
            type="primary"
            @click="doAction('addNewVersion', app)"
            >添加新版本</a-button
          >
        </a-col>
      </a-row>
      <div class="tab-page">
        <div v-for="(item, index) in fileList" :key="index" class="box">
          <div class="box-title sub" :class="{ hover: item.is_selected }">
            <span style="font-weight: bold">
              {{ item.is_selected ? "当前版本" : "历史版本" }}
            </span>
            <span> </span>
          </div>
          <div class="box-content">
            <table border="0" cellspacing="0">
              <tr class="thead">
                <th v-if="!item.is_selected">选择当前版本</th>
                <th>版本号</th>
                <th>包名</th>
                <th>上传日期</th>
                <th style="min-width: 80px">版本大小</th>
                <th colspan="3">更新说明</th>
                <th colspan="3">操作</th>
              </tr>
              <tr>
                <td class="center" v-if="!item.is_selected">
                  <a-switch
                    size="small"
                    v-model:checked="item.enable_sign_verify"
                  /><span style="margin-left: 12px">{{ item.version }}</span>
                </td>
                <td class="center">
                  <span>{{ item.version }}</span>
                </td>
                <td class="center">
                  <a href="item.package">{{ item.package }}</a>
                </td>
                <td class="center">{{ item.created_at }}</td>
                <td class="center">
                  {{ item.size }}
                  <a-tooltip
                    v-if="item.signature_type === 3"
                    content="百分新签名"
                    placement="top"
                    effect="light"
                  >
                    <a-tag class="cursor" type="success">新</a-tag>
                  </a-tooltip>
                  <a-tooltip
                    v-else-if="item.signature_type === 2"
                    content="百分旧签名"
                    placement="top"
                    effect="light"
                  >
                    <a-tag class="cursor" type="danger">旧</a-tag>
                  </a-tooltip>
                </td>
                <td class="center" colspan="3">
                  <span>{{ item.description }}</span>
                </td>
                <td class="center" colspan="3">
                  <span style="text-align: center; cursor: pointer">
                    <a-tag
                      type="primary"
                      color="warning"
                      :bordered="false"
                      v-if="item.signature_type === 1"
                      >审核中</a-tag
                    >
                    <a-tag
                      type="primary"
                      color="error"
                      :bordered="false"
                      v-if="item.signature_type === 1"
                      >查看失败理由</a-tag
                    >
                    <a-tag
                      type="primary"
                      color="#4CC87E"
                      :bordered="false"
                      v-if="item.rest_time"
                      >{{ item.rest_time }}</a-tag
                    >
                    <a-tag
                      type="primary"
                      color="#4CC87E"
                      :bordered="false"
                      @click="doAction('Download', item)"
                      >下载</a-tag
                    >
                    <a-tag
                      type="danger"
                      color="#4CC87E"
                      :bordered="false"
                      @click="doAction('Renewal', item)"
                      >更新</a-tag
                    >
                    <a-tag
                      style="margin-top: 5px"
                      :bordered="false"
                      color="#4CC87E"
                      type="success"
                      @click="doAction('delist', item)"
                      >申请下架</a-tag
                    >
                  </span>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </a-card>
    <!-- <DiaoBasic ref="diaoBasic" :dialog-visible="dialog.basicVisible" @close="onClose('basic')" @success="onSuccess($event,'basic')" /> -->
    <DiaoBasic
      :visible="isModalVisible"
      :message="modalMessage"
      @update:visible="isModalVisible = $event"
    />
  </div>
</template>

<script setup>
import { reactive, ref, h } from "vue";
import {
  ExclamationCircleOutlined,
  CloseOutlined,
  CheckCircleOutlined,
} from "@ant-design/icons-vue";
import DiaoBasic from "./diao-basic.vue";
const app = reactive({
  id: "1",
  name: "闲置花园装饰",
  aappID: 6251548,
  status: "审核中",
  benbn: "1.2.0",
  title: "com.jsljk.apk",
  createTime: "2023/5/31 15:49:54",
  size: "52.35M",
  description:
    "① 新增改名功能；② 新增商店物品预览功能；③ 优化举报系统；④ 优化广告观看体验",
  icon: "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
  sort: "冒险、益智、休闲、宠物",
  Language: "中文",
  introduce: "一场拥抱自由和温暖的云端之旅",
  age: "12+",
  intor:
    "时隔多年再度回归，开启一场难忘的社交冒险体验，在晴空与云海之中与翱翔的追梦者相遇。+",
  bannerList: [
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
  ],
  urls: [
    "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
    "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
    "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
    "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
    "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
    "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
    "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
  ],
  videoTitle: "一场拥抱自由和温暖的云端之旅",
  videoUrl:
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
  videoFile:
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
});
const fileList = ref([
  {
    id: 626808,
    channel: 0,
    channel_text: "",
    package: "com.trueaxis.jetcarstunts",
    size: "19.9M",
    md5: "c6946818fd7c88059cc5f3c5d68aac1b",
    vercode: 7,
    version: "1.06",
    min_support_ver: 7,
    signature: {
      method: "md5",
      signature: "2c787350b56ae93d9001d1d4d029d0ec",
    },
    des: "",
    ext: "apk",
    download_url: "https://android.100520.com/download/626808.html",
    download_url3:
      "https://ali-dl.100520.com/app/202443/c6946818fd7c88059cc5f3c5d68aac1b_1iaqasd2c.apk",
    download_url2: "https://android.100520.com/download1/626808.html",
    other_download_url: "",
    created_at: "2024-10-22 22:42:52",
    description:
      "① 新增改名功能；② 新增商店物品预览功能；③ 优化举报系统；④ 优化广告观看体验",
    signature_type: 2,
    is_selected: true,
    total_down_num: 1,
    down_note: "",
    is_oss: 0,
    enable_sign_verify: true,
    speed_is_recommend: false,
    multi_ver_is_recommend: false,
    channel_apps: [],
  },
  {
    id: 624533,
    channel: 0,
    channel_text: "",
    package: "com.trueaxis.jetcarstunts",
    size: "29.9M",
    md5: "c6946818fd7c88059cc5f3c5d68aac1b",
    vercode: 7,
    version: "1.06",
    min_support_ver: 7,
    signature: {
      method: "md5",
      signature: "2c787350b56ae93d9001d1d4d029d0ec",
    },
    des: "",
    ext: "apk",
    download_url: "https://android.100520.com/download/624533.html",
    download_url3:
      "https://ali-dl.100520.com/app/202439/c6946818fd7c88059cc5f3c5d68aac1b.apk",
    download_url2: "https://android.100520.com/download1/624533.html",
    other_download_url: "",
    created_at: "2024-09-26 11:12:22",
    rest_time: "剩余1天3时45分后上线",
    way: 1,
    cause:
      "① 新增改名功能；② 新增商店物品预览功能；③ 优化举报系统；④ 优化广告观看体验",
    screenshot: [
      "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
      "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
    ],
    description:
      "① 新增改名功能；② 新增商店物品预览功能；③ 优化举报系统；④ 优化广告观看体验",
    signature_type: 1,
    is_selected: false,
    total_down_num: 2,
    down_note: "",
    is_oss: 0,
    enable_sign_verify: false,
    speed_is_recommend: false,
    multi_ver_is_recommend: false,
    channel_apps: [],
  },
  {
    id: 624533,
    channel: 0,
    channel_text: "",
    package: "com.trueaxis.jetcarstunts",
    size: "59.9M",
    md5: "c6946818fd7c88059cc5f3c5d68aac1b",
    vercode: 7,
    version: "1.06",
    min_support_ver: 7,
    signature: {
      method: "md5",
      signature: "2c787350b56ae93d9001d1d4d029d0ec",
    },
    des: "",
    ext: "apk",
    download_url: "https://android.100520.com/download/624533.html",
    download_url3:
      "https://ali-dl.100520.com/app/202439/c6946818fd7c88059cc5f3c5d68aac1b.apk",
    download_url2: "https://android.100520.com/download1/624533.html",
    other_download_url: "",
    created_at: "2024-09-26 11:12:22",
    description:
      "① 新增改名功能；② 新增商店物品预览功能；③ 优化举报系统；④ 优化广告观看体验",
    signature_type: 2,
    is_selected: false,
    total_down_num: 2,
    down_note: "",
    is_oss: 0,
    enable_sign_verify: true,
    speed_is_recommend: false,
    multi_ver_is_recommend: false,
    channel_apps: [],
  },
]);
//
const current = ref(2);
const items = ref([
  {
    title: "创建游戏",
    description: "已于12月21日提交",
  },
  {
    title: "上传安装包资源",
    description: "已于12月21日提交",
  },
  {
    title: "游戏审核中",
    description: "待审核，预计3-5个工作日",
  },
  {
    title: "发布游戏",
    description: "审核完成后发布游戏，可以预约时间",
  },
]);

const isModalVisible = ref(false);
const modalMessage = ref(null);

const doAction = (action, row) => {
  console.log("row: ", row);
  if (action === "edit") {
    console.log("row: ", row);
    console.log("action: ", action);
  } else if (action === "pass") {
    console.log("row: ", "通过");
  } else if (action === "noPass") {
    console.log("row: ", "不通过");
  } else if (action === "addNewVersion") {
    console.log("addNewVersion: ", "addNewVersion");
  } else if (action === "deleteSteps") {
    console.log("deleteSteps: ", "deleteSteps");
  } else if (action === "Download") {
    console.log("Download--item", "下载");
  } else if (action === "delist") {
    console.log("delist", "申请下架");
    isModalVisible.value = true;
    modalMessage.value = row;
  }
};

const labelCol = {
  style: {
    width: "108px",
    marginRight: "20px",
  },
};
const wrapperCol = {
  span: 24,
};
// const formRef = ref()
// const formState = reactive({
//   icons:[],
//   banner:[],
//   name: '',
//   englishName: '',
//   play: '',
//   style : '',
//   themes : '',
//   features : [],
//   age:[],
//   states:[],
//   description: '',
//   profile:'',
// });
</script>

<style lang="less" scoped>
@import url("./basic.less");
.banner {
  display: flex;
  flex-direction: row;
}
.margin20 {
  margin-top: 20px;
}
.a_col_date {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: rgba(76, 200, 126, 1);
}
:deep(.ant-image) {
  border: 1px dashed #ccc;
  margin-right: 8px;
}
</style>
